<template>
  <div class="content-left">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel
        v-for="(value, key) in collapseList"
        :key="key"
        :header="value.label"
      >
        <div
          v-for="rowInd in Math.ceil(value.list.length / 2)"
          :key="JSON.stringify(value.list[rowInd]) + rowInd"
          class="flex-row"
        >
          <draggable
            :list="value.list.slice(rowInd * 2 - 2, rowInd * 2)"
            item-key="value"
            class="flex-row"
            :group="{ name: 'dragGroup', pull: 'clone', put: false }"
            :sort="false"
            :clone="renderNode"
            @end="dragEnd"
          >
            <template #item="{ element }">
              <a-card>
                <component :is="element.icon"></component>
                {{ element.label }}
              </a-card>
            </template>
          </draggable>
          <a-card
            v-if="value.list.slice(rowInd * 2 - 2, rowInd * 2).length < 2"
            class="empty"
          ></a-card>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script setup lang="ts">
import {
  NodeExpandOutlined,
  LayoutOutlined,
  TableOutlined,
} from "@ant-design/icons-vue";
import { reactive, ref } from "vue";
import type { CollapseList, CollapseItem, Schema } from "@/types/custom.ts";
import { INITCOMPONENT } from "@/utils/constEnums.ts";
import { useDragStore } from "@/stores/useDefaultStore.ts";

const activeKey = ref<string[]>(["container", "baseField"]);
const collapseList = reactive<CollapseList>({
  container: {
    label: "容器",
    list: [
      { label: "栅格布局", value: "grid", icon: LayoutOutlined },
      { label: "数据表格", value: "table", icon: TableOutlined },
    ],
  },
  baseField: {
    label: "基础字段",
    list: [
      { label: "单行输入", value: "input", icon: NodeExpandOutlined },
      { label: "多行输入", value: "textarea", icon: LayoutOutlined },
      { label: "计数器", value: "counter", icon: TableOutlined },
    ],
  },
});
const dragStore = useDragStore();
let activeId = ref<number | string>(0);
const renderNode = (node: CollapseItem): Schema => {
  activeId.value = Date.now();
  return { id: Date.now(), ...node, ...INITCOMPONENT[node.value] };
};
const dragEnd = () => {
  dragStore.setActiveId(activeId.value);
};
</script>
<style lang="less" scoped>
.content-left {
  height: 100%;
  background: #f5f6fa;
  padding: 10px;
  :deep(.ant-collapse-content) {
    .flex-row {
      display: flex;
      width: 100%;
      flex: 1;
      .ant-card {
        flex: 1;
        border-color: #dcdfe6;
        margin-bottom: 10px;
        .ant-card-body {
          padding: 6px 10px;
        }
        &.empty {
          border: none;
        }
        &:first-child {
          margin-right: 10px;
        }
        &:not(.empty) {
          cursor: move;
          &:hover {
            border-color: #409eef;
            background: #f1f2f3;
          }
        }
      }
      &:has(+ .ant-card) {
        margin-right: 10px;
        .ant-card:first-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
